import React, { Component } from 'react'
import {
  Card,
  Button,
  Table,
  message,
  Modal
} from 'antd'
import AddForm from './add-form'
import AuthForm from './auth-form'

import {PAGE_SIZE} from '../../utils/constant'
import { reqRoles, reqAddRoles, reqUpdateRoles } from '../../api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'
import {formateDate} from '../../utils/dateUtils'

/**
 * 角色路由
 */

export default class Role extends Component {

  state = {
    roles: [], // 所有的角色
    role: {}, // 选中的角色
    isShowAdd:false, // 是否显示添加弹出窗
    isShowAuth: false, // 设置角色权限是否显示
  }
  auth: any
  props: any
  form: any
  columns: ColumnProps<any>[]

  constructor(props) {
    super(props)
    this.auth = React.createRef()
  }

  /**
   * 初始化column
   */
  initColumn = () => {
    this.columns = [
      {
        title: '角色名称',
        dataIndex: 'name'
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        render: formateDate
      },
      {
        title: '授权时间',
        dataIndex: 'auth_time',
        render: formateDate
      },
      {
        title: '授权人',
        dataIndex: 'auth_name'
      }
    ]
  }

  /**
   * 点击选中的角色
   */
  onRow = (role) => {
    return {
      onClick: event => {
        // 点击了行
        console.log("🚀 ~ file: role.jsx ~ line 105 ~ Role ~ 点击了行",role)
        this.setState({
          role
        })
      }
    }
  }

  /**
   * 获取所有角色
   */
  getRoles = async () => {
    const result = await reqRoles()
    if (result.status === 0) {
      const roles = result.data
      this.setState({
        roles
      })
    }
  }
  
  /**
   * 添加角色
   */
  addRole = () => {
    // 进行表单验证，只有通过了才能往下处理
    this.form.validateFields(async(error,values) => {
      if(!error) {
        // 隐藏确认框
        this.setState({
          isShowAdd: false
        })
        // 收集输入数据
        const {roleName} = values
        // 点击确定，清空input；点击取消保留input内容
        this.form.resetFields()
      
    // 请求添加
    const result = await reqAddRoles(roleName)
    if (result.status === 0) {
      // 根据结果显示/更新列表显示
      message.success('添加角色成功')

      /**第一种方法 
        this.getRoles()
      */

      /**第二种方法
      // 新产生的角色
      // const role = result.data
      // // 更新role状态
      // const roles = this.state.roles
      // roles.push(role)
      // this.setState({
      //   roles
      // })
      */
     /**第三种方法 
      * 更新roles状态：基于原本状态数据更新
     */
      const role = result.data
     this.setState(state => ({
       roles: [...state.roles,role]
     }))
    }else {
      message.error('添加角色失败！')
    }
   }
 })
}
  /**
   * 更新角色权限
   */
   updateRole = async () => {
      // 隐藏确认框
      this.setState({
        isShowAuth: false
      })
     const role = this.state.role
     const menus = this.auth.current.getMenus()
     role.menus = menus
     role.auth_time = Date.now()
     role.auth_name = memoryUtils.user.username
     // 请求更新
     const result = await reqUpdateRoles(role)
     if (result.status === 0) {
       //  this.getRoles()
       // 如果当前更新的是自己角色的权限，强制退出
       if(role._id === memoryUtils.user.role_id) {
         memoryUtils.user = {}
         storageUtils.removeUser()
         this.props.history.replace('/login')
        } else {
          message.success('设置更新权限成功！')
          this.setState({
            roles: [...this.state.roles]
        })
      }
     } else {
       message.error('设置更新权限失败！')
     }
   }

  UNSAFE_componentWillMount() {
    this.initColumn()
  }

  componentDidMount() {
    this.getRoles()
  }


  render() {
    const {roles, role, isShowAdd, isShowAuth} = this.state
    const title = (
      <span>
        <Button type='primary' onClick={() => this.setState({isShowAdd: true})}>创建角色</Button>
        <Button type='primary' style={{marginLeft: 15}} disabled={!role._id} onClick={() => this.setState({isShowAuth: true})}>设置角色权限</Button>
      </span>
    )
    return (
      <Card title={title}>
        <Table
          bordered
          rowKey= '_id'
          dataSource={roles}
          columns={this.columns}
          pagination= {{defaultPageSize: PAGE_SIZE}}
          rowSelection={{
            type: 'radio', 
            selectedRowKeys:[role._id],
            onSelect: (role) => {
              this.setState({
                role
              })
            }
          }}
          onRow={this.onRow}
        />
        <Modal
          title="添加角色"
          visible={isShowAdd}
          onOk={this.addRole}
          onCancel={() => {
            this.setState({isShowAdd: false})
          }}
        >
          <AddForm 
            setForm = {(form)=>{this.form = form}}
          />
        </Modal>
        <Modal
          title="设置角色权限"
          visible={isShowAuth}
          onOk={this.updateRole}
          onCancel={() => {
            this.setState({isShowAuth: false})
          }}
        >
          <AuthForm
            role={role}
            ref={this.auth}
           />
        </Modal>
      </Card>
    )
  }
}

